<script setup lang="ts">
import { ref } from 'vue'
import LeafletMap from './components/LeafletMap.vue'
import TrackPlayback from './components/TrackPlayback.vue'
import CesiumDroneDemo from './components/CesiumDroneDemo.vue'

const currentPage = ref<'map' | 'track' | 'cesium'>('map')

const switchToMap = () => { currentPage.value = 'map' }
const switchToTrack = () => { currentPage.value = 'track' }
const switchToCesium = () => { currentPage.value = 'cesium' }
</script>

<template>
  <div class="app">
    <!-- 页面切换导航 -->
    <nav class="page-nav">
      <button @click="switchToMap" :class="['nav-btn', { active: currentPage === 'map' }]"><span>🗺️ 地图标记</span></button>
      <button @click="switchToTrack" :class="['nav-btn', { active: currentPage === 'track' }]"><span>🚗 轨迹回放</span></button>
      <button @click="switchToCesium" :class="['nav-btn', { active: currentPage === 'cesium' }]"><span>🚁 Cesium无人机</span></button>
    </nav>

    <!-- 页面内容 -->
    <main class="page-content">
      <LeafletMap v-if="currentPage === 'map'" />
      <TrackPlayback v-else-if="currentPage === 'track'" />
      <CesiumDroneDemo v-else />
    </main>
  </div>
</template>

<style scoped>
.app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 2000;
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-btn {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.nav-btn:hover { background: #e9ecef; border-color: #adb5bd; transform: translateY(-1px); }
.nav-btn.active { background: linear-gradient(135deg, #007bff, #0056b3); color: white; border-color: #007bff; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3); }

.page-content {
  flex: 1;
  position: relative;
  padding-top: 72px; /* 避免导航遮挡内容 */
}

@media (max-width: 768px) {
  .page-nav { top: 10px; left: 10px; right: 10px; padding: 8px; }
  .nav-btn { padding: 8px 12px; font-size: 12px; }
  .page-content { padding-top: 64px; }
}
</style>
